import React, { Suspense } from 'react'
import {
    BrowserRouter,
    Route,
    Routes,
    Navigate
} from 'react-router-dom'
import routes from './routerConfig'

interface ROUTERTYPES {
    path: string,
    component?: any,
    children?: ROUTERTYPES[],
    to?: string
}

export default function routerviong() {
    const renderDom = (router: ROUTERTYPES[]) => {
        return router.map((item, index) => {
            return <Route key={index} path={item.path} element={item.to ? <Navigate to={item.to} /> : <item.component />}>
                {
                    item.children && renderDom(item.children)
                }
            </Route>
        })
    }

    return (
        <BrowserRouter>
            <Suspense fallback={<div>路由加载中。。。</div>}>
                <Routes>
                    {
                        renderDom(routes)
                    }
                        
                </Routes>
            </Suspense>
        </BrowserRouter>
    )
}
